<template>
  <!-- 模板部分保持不变 -->
  <view class="statistics-container">
    <u-navbar
      title="数据统计"
      placeholder
      fixed
      leftIcon=""
      bgColor="#281e1d"
      :titleStyle="{ color: '#fff', fontWeight: 'bold' }"
    ></u-navbar>

    <view class="data-overview">
      <view class="data-card">
        <text class="data-title">累计商户数</text>
        <text class="data-value">{{ data.merchant.total }}</text>
      </view>
      <view class="data-card">
        <text class="data-title">今日新增</text>
        <text class="data-value">{{ data.merchant.today_orders }}</text>
      </view>
    </view>

    <view class="chart-container">
      <text class="chart-title">近7日商户增长趋势</text>
      <view style="width: 100%; height: 300px">
        <qiun-data-charts
          type="line"
          :chartData="merchantChartData"
          :canvas2d="true"
          canvasId="agentMerchantChart"
        />
      </view>
    </view>

    <view class="data-overview">
      <view class="data-card">
        <text class="data-title">累计供应商数</text>
        <text class="data-value">{{ data.supplier.total }}</text>
      </view>
      <view class="data-card">
        <text class="data-title">今日新增</text>
        <text class="data-value">{{ data.supplier.today_orders }}</text>
      </view>
    </view>

    <view class="chart-container">
      <text class="chart-title">近7日供应商增长趋势</text>
      <view style="width: 100%; height: 300px">
        <qiun-data-charts
          type="line"
          :opts="chartOptions"
          :chartData="supplierChartData"
          :canvas2d="true"
          canvasId="agentSupplierChat"
        />
      </view>
    </view>

    <my-tabbar current-page="/pages/agenter/statistics"></my-tabbar>
  </view>
</template>

<script setup>
import { ref, computed, nextTick, watch } from "vue";
import { agentStatistics } from "@/common/apis/agent.js";
import { onReady, onShow } from "@dcloudio/uni-app";

const data = ref({
  merchant: {
    total: 0,
    today_orders: 0,
    week_orders: [],
  },
  supplier: {
    total: 0,
    today_orders: 0,
    week_orders: [],
  },
});

const chartOptions = ref({
  color: ["#2979ff"],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {
    show: false,
  },
  xAxis: {
    disableGrid: true,
  },
  yAxis: {
    gridType: "dash",
    dashLength: 2,
  },
  extra: {
    line: {
      type: "straight",
      width: 2,
    },
  },
});

const merchantChartData = computed(() => ({
  categories: data.value.merchant.week_orders.map((item) =>
    item.date.split("-").slice(1).join("/")
  ),
  series: [
    {
      name: "商户数",
      data: data.value.merchant.week_orders.map((item) => item.cnt),
    },
  ],
}));

const supplierChartData = computed(() => ({
  categories: data.value.supplier.week_orders.map((item) =>
    item.date.split("-").slice(1).join("/")
  ),
  series: [
    {
      name: "供应商数",
      data: data.value.supplier.week_orders.map((item) => item.cnt),
    },
  ],
}));

onReady(async () => {
  const response = await agentStatistics();
  if (response) {
    await nextTick();
    data.value = response;
  }
});
</script>

<style lang="scss" scoped>
/* 样式部分保持不变 */
.statistics-container {
  padding: 20rpx;

  .data-overview {
    display: flex;
    gap: 20rpx;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .data-card {
      width: 48%;
      background: #fff;
      border-radius: 16rpx;
      padding: 30rpx;
      text-align: center;

      .data-title {
        font-size: 28rpx;
        color: #999;
      }

      .data-value {
        font-size: 40rpx;
        font-weight: bold;
        color: #333;
        margin-top: 10rpx;
        display: block;
      }
    }
  }

  .chart-container {
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    margin-bottom: 30rpx;

    .chart-title {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      display: block;
    }

    .qiun-data-charts {
      width: 100%;
      height: 400rpx;
    }
  }
}
</style>
